import { UploadOutlined } from "@ant-design/icons";
import ProForm, { DrawerForm, ProFormDatePicker, ProFormDigit, ProFormGroup, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { ProColumns } from "@ant-design/pro-table"
import { Button, Upload } from "antd";
import { useState } from "react";

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [showDetail,setShowDetail] = useState(false);
  const [showDetail2,setShowDetail2] = useState(false);
  const [showDetail3,setShowDetail3] = useState(false);

  const [fileList,setFileList] =useState<any>([]);

  const columns_2:ProColumns[] = [
    {
      title: '年度',
      dataIndex: 'n1',
      renderText:()=>'2021'
    },
    {
      title: '手术例数',
      dataIndex: 'n1',
      renderText:()=>'100'
    },
  ]

  const [dataList,setDataList] = useState<any>([
    {
      name1:'江苏省',
      name2:'南京市',
      name3:'玄武区',
      name8:'型号XXXX01',
      factory:'达芬奇'
    },
    {
      name1:'江苏省',
      name2:'南通市',
      name3:'崇川区',
      name8:'型号XXXX02',
      factory:'达芬奇'
    },
    {
      name1:'江苏省',
      name2:'苏州市',
      name3:'姑苏区',
      name8:'型号XXXX03',
      factory:'直观复兴'
    },
    {
      name1:'江苏省',
      name2:'苏州市',
      name3:'张家港市',
      name8:'型号XXXX04',
      factory:'直观复兴'
    },
  ]);

  const columns:ProColumns[] = [
   
    
    {
      title:'所属厂家',
      dataIndex: 'factory',
      ellipsis:true,
    },
    {
      title:'省份',
      dataIndex: 'name1',
    },
    {
      title:'市',
      dataIndex: 'name2',
    },
    {
      title:'区',
      dataIndex: 'name3',
    },
    {
      title:'详细地址',
      width:150,
      hideInSearch:true,
      ellipsis:true,
      dataIndex: 'name4',
      renderText:()=>'--'
    },
    {
      title:'竞争产品型号',
      dataIndex: 'name8',
    },
    {
      title:'竞争产品数量',
      dataIndex: 'name8',
      renderText:()=>'2'
    },
    {
      title:'竞争产品类型',
      dataIndex: 'name8',
      renderText:()=>'产品类型'
    },
    {
      title:'所有人',
      dataIndex: 'name73',
      width:100,
      renderText:()=>'王五'
    },
    {
      title:'创建日期',
      dataIndex: 'name7in8',
      width:100,
      hideInSearch:true,
      renderText:()=>'2022-12-11'
    },
    {
      title: "操作",
      valueType: 'option',
      width:100,
      render: (text, record:any,_, action) => [
        <a key="b2" onClick={()=>setShowDetail(true)}>详情</a>,
        // <a key="b3" onClick={()=>setShowDetail2(true)}>装机</a>
      ]
    }
  ]

  const columns3:ProColumns[] = [
    
    {
      title:'装机台数',
      hideInSearch:true,
      dataIndex: 'name7',
      renderText:()=>'4'
    },
    {
      title:'装机时间',
      dataIndex: 'name8',
      hideInSearch:true,
      renderText:()=>'2022-01-03'
    },
    {
      title:'装机型号',
      dataIndex: 'name9',
      renderText:()=>'IS3000'
    },
    {
      title:'手术例数-2021',
      hideInSearch:true,
      dataIndex: 'name9',
      renderText:()=>'100'
    },
    {
      title:'手术例数-2022',
      hideInSearch:true,
      dataIndex: 'name9',
      renderText:()=>'200'
    },
    {
      title: "操作",
      valueType: 'option',
      width:150,
      render: (text, record:any,_, action) => [
       <a key="b2" onClick={()=>setShowDetail(true)}>详情</a>
      ]
    }
  ]

  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowDetail(true)
          }} >新建</Button>]
        }
     dataSource={dataList}
      scroll={{x:1200}}
      columns={columns}
      rowKey="id"
      search={{span:6}}
      toolbar={{
        menu: {
          type: 'tab',
          activeKey: activeKey,
          items: [
            {
              key: 'tab1',
              label: <span>全部</span>,
            },
            {
              key: 'tab2',
              label: <span>我负责的</span>,
            },
            {
              key: 'tab5',
              label: <span>我参与的</span>,
            }
          ],
          onChange: (key) => {
            setActiveKey(key as string);
          },
        },
        settings: [],
      }}
      />
      <DrawerForm title='详情' width={1200} visible={showDetail}  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
          <ProFormGroup>
            <ProFormSelect name="name61" width={'md'} label="业务类型"  options={[{label:'类型1',value:'0'},{label:'类型2',value:'1'}]} />
              <ProFormText name="name661" width={'sm'}  label="竞争对手名称"/>
              <ProFormText name="name66" width={'sm'}  label="竞争产品类型"/>
              <ProFormText name="name67" width={'sm'}  label="优势"/>
              <ProFormText name="name68" width={'sm'}  label="劣势"/>
             
          </ProFormGroup>
          <ProFormGroup>
             <ProFormSelect name="name62" width={'md'} label="省份" rules={[{ required: true}]} options={[{label:'江苏省',value:'0'},{label:'上海市',value:'1'}]} />
              <ProFormSelect name="name63" width={'md'} label="市" rules={[{ required: true}]} options={[{label:'南京市',value:'0'},{label:'南通市',value:'1'}]} />
              <ProFormSelect name="name64" width={'md'} label="区" options={[{label:'江宁区',value:'0'},{label:'玄武区',value:'1'}]} />
          </ProFormGroup>
          <ProFormText name="name65" width={'lg'}  label="详细地址"/>

          <ProFormTextArea name="name11" width={'lg'} label="备注" />

          <ProFormGroup>
              <ProFormText name="name3" width={'sm'} disabled label="所有人" rules={[{ required: true}]}/>
              <Button style={{marginTop:4}} type='primary'>选择</Button>
            <ProFormSelect name="name8" width={'md'} label="所属部门" options={[{label:'销售部',value:'0'},{label:'管理部',value:'1'}]} />
          </ProFormGroup>
         
          <div style={{height:20}}></div>
      </DrawerForm>

      <DrawerForm title='装机' width={1200} visible={showDetail2}  onVisibleChange={v=>{setShowDetail2(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
           <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowDetail3(true)
          }} >新建</Button>]
        }
     dataSource={[{}]}
      scroll={{x:1400}}
      columns={columns3}
      rowKey="id"
      search={false}
      toolbar={{
        menu: { },
        settings: [],
      }}
      />
      <DrawerForm title='详情' width={1200} visible={showDetail3}  onVisibleChange={v=>{setShowDetail3(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
          <ProFormGroup>
            <ProFormDigit name="name2" width={'md'}  label="装机台数" rules={[{ required: true}]}/>
            <ProFormDatePicker name="name21" width={'md'}  label="装机时间" rules={[{ required: true}]}/>
            <ProFormText name="name22" width={'md'}  label="装机型号" rules={[{ required: true}]}/>

          </ProFormGroup>
          <ProFormGroup>
              <ProFormText name="name3" width={'sm'} disabled label="装机医院" rules={[{ required: true}]}/>
              <Button style={{marginTop:4}} type='primary'>选择</Button>
          </ProFormGroup>
          
          <ProTable dataSource={[{}]}  style={{marginLeft:-20,marginBottom:20}} toolBarRender={() => [
            <Button
              type="primary"
              key="primary"
              onClick={() => {
              
              }}
            >添加
            </Button>,
          ]}
          toolbar={{settings:[]}}search={false} pagination={false} size='small'  id={'id'}
                    columns={columns_2}/>

          <ProFormTextArea name="name11" width={'lg'} label="备注" />
      </DrawerForm>
      </DrawerForm>
    </PageContainer>)
}